<template>
    <view class="wanl-list">
        <!-- 导航条 -->
        <view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
            <view class="cu-bar bg-bgcolor fixed" :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px' }">
                <!-- 1.1.9 升级 其他页面进入 -->
                <view v-if="pagesNum > 1" class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
                <!-- 直接进入 -->
                <view v-else class="action" @tap="$wanlshop.on('/pages/index')"><text class="wlIcon-zhuye"></text></view>

                <view class="search-form round">
                    <text class="wlIcon-sousuo1 text-bold"></text>
                    <view>
                        <input type="text" v-model="params.search" placeholder="搜索" @keyup="handleKeyup" @blur="handleBlur" />
                    </view>
                </view>
                <view class="action" @tap="editListstyle()">
                    <text class="wlIcon-listing-jf" v-if="liststyle == 'col-2-20'"></text>
                    <text class="wlIcon-liebiao" v-else></text>
                </view>
            </view>
        </view>
        <view class="head" :class="{ headtop: scrollStype }">
            <view class="cue">
                <view class="bar" style="justify-content: space-around">
                    <view class="item" :class="{ current: filterIndex === 0 }" @tap="tabClick(0)">综合</view>
                    <view class="item" :class="{ current: filterIndex === 1 }" @tap="tabClick(1)">销量</view>
                    <view class="item" :class="{ current: filterIndex === 2 }" @tap="tabClick(2)">新上架</view>
                </view>
            </view>
        </view>
        <!-- 主体 -->
        <block v-if="goodsData.length > 0">
            <wanl-product :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
        </block>
        <block v-if="goodsData.length === 0 && status !== 'loading'">
            <wanl-empty :text="empty" />
            <wanl-divider width="60%">猜你喜欢</wanl-divider>
            <wanl-product :dataList="likeData" />
        </block>
        <uni-load-more :status="status" :content-text="contentText" />
        <uni-drawer :visible="showRight" mode="right" @close="closeDrawer">
            <view class="drawer">
                <scroll-view scroll-y="true" class="scroll" :style="{ height: $wanlshop.wanlsys().windowHeight + 'px' }">
                    <view class="item solid-bottom" v-if="drawerData.brand.length > 0">
                        <view class="title">品牌</view>
                        <view class="list">
                            <text v-for="(bd, index) in drawerData.brand" :key="bd.id" :class="{ active: bd.choice }" data-key="brand" :data-attribute="index" @tap="onDraver">
                                {{ bd.name }}
                            </text>
                        </view>
                    </view>
                    <view class="item solid-bottom">
                        <view class="title">价格区间</view>
                        <view class="from">
                            <input type="number" placeholder="最低价" v-model="drawerData.price.low" value="" />
                            <text class="">—</text>
                            <input type="number" placeholder="最高价" v-model="drawerData.price.high" value="" />
                        </view>
                    </view>
                    <view class="item solid-bottom">
                        <view class="title" data-key="city" @tap="onDraverTitle">
                            <text>发货地</text>
                            <text :class="[drawerType.city ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
                        </view>
                        <view class="list">
                            <text class="wlIcon-weizhi" data-key="sameCity" :class="{ active: drawerData.sameCity.choice }" :data-data="drawerData.sameCity.name" @tap="onDraver">
                                {{ drawerData.sameCity.name }}
                            </text>
                        </view>
                        <view class="title" v-if="drawerType.city"><text>城市</text></view>
                        <view class="list" v-if="drawerType.city">
                            <text v-for="(cy, index) in drawerData.city" :key="cy.name" :class="{ active: cy.choice }" data-key="city" :data-attribute="index" @tap="onDraver">
                                {{ cy.name }}
                            </text>
                        </view>
                    </view>
                    <block v-if="drawerData.attribute.length > 0" v-for="(att, index) in drawerData.attribute" :key="att.name">
                        <view class="item solid-bottom">
                            <view class="title" :data-key="index" @tap="onDraverTitle">
                                <text>{{ att.name }}</text>
                                <text :class="[drawerData.attribute[index].fold ? 'wlIcon-fanhui3' : 'wlIcon-fanhui4']"></text>
                            </view>
                            <view class="list" v-if="drawerData.attribute[index].fold">
                                <text v-for="(val, key) in att.value" :key="val.name" :data-key="key" :data-attribute="index" :class="{ active: val.choice }" @tap="onDraver">
                                    {{ val.name }}
                                </text>
                            </view>
                        </view>
                    </block>
                </scroll-view>
                <view class="footer">
                    <view>
                        <button class="cu-btn bg-gradual-yellow round-left" @tap="onDrawerReset">重置</button>
                        <button class="cu-btn bg-gradual-orange round-right" @tap="onDrawerTo">确定</button>
                    </view>
                </view>
            </view>
        </uni-drawer>
        <view class="edgeInsetBottom"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            WanlScroll: 0, //记录页面滚动
            scrollStype: false, //滚动状态
            filterIndex: 0, //
            priceOrder: 0, //1 价格从低到高 2价格从高到低
            liststyle: "col-2-20", //列表样式
            goodsData: [], //商品列表数据
            showRight: false,
            category: "",
            goodsType: "score",
            empty: "没有找到任何宝贝",
            params: {
                search: "",
                type: 0,
                // sort: "weigh",
                // order: "asc",
                page: 1,
                // filter: {},
                // op: {},
            },
            likeData: [],
            drawerType: {
                attribute: false,
                first: false,
                city: false,
            },
            drawerData: {
                price: {
                    low: "",
                    high: "",
                },
                brand: [],
                attribute: [],
                sameCity: {
                    name: " 定位中..",
                    choice: false,
                },
                city: [
                    { name: "北京", choice: false },
                    { name: "天津", choice: false },
                    { name: "河北", choice: false },
                    { name: "山西", choice: false },
                    { name: "内蒙古", choice: false },
                    { name: "山东", choice: false },
                    { name: "江苏", choice: false },
                    { name: "上海", choice: false },
                    { name: "浙江", choice: false },
                    { name: "安徽", choice: false },
                    { name: "福建", choice: false },
                    { name: "江西", choice: false },
                    { name: "河南", choice: false },
                    { name: "湖南", choice: false },
                    { name: "湖北", choice: false },
                    { name: "广东", choice: false },
                    { name: "广西", choice: false },
                    { name: "海南", choice: false },
                    { name: "辽宁", choice: false },
                    { name: "吉林", choice: false },
                    { name: "黑龙江", choice: false },
                    { name: "四川", choice: false },
                    { name: "贵州", choice: false },
                    { name: "云南", choice: false },
                    { name: "重庆", choice: false },
                    { name: "宁夏", choice: false },
                    { name: "青海", choice: false },
                    { name: "陕西", choice: false },
                    { name: "甘肃", choice: false },
                    { name: "新疆", choice: false },
                    { name: "西藏", choice: false },
                    { name: "香港", choice: false },
                    { name: "澳门", choice: false },
                    { name: "台湾", choice: false },
                ],
            },
            drawerParams: {},
            reload: false, //判断是否上拉
            last_page: 0,
            status: "loading",
            contentText: {
                contentdown: "",
                contentrefresh: "正在加载..",
                contentnomore: "没有更多数据了",
            },
            pagesNum: 0,
        };
    },
    onLoad(option) {
        this.pagesNum = getCurrentPages().length; // 1.1.9 升级
        if (option.type) {
            this.goodsType = option.type;
        }
        if (option.search) {
            //如果搜索存在
            this.params.search = option.search;
            this.drawerParams.search = option.search;
        } else if (option.data) {
            var data = JSON.parse(option.data);
            this.drawerParams.category_id = data.category_id;
            this.category = data.category_name;
            // this.params.filter.category_id = data.category_id;
            // this.params.op.category_id = "in";
        } else {
            console.log("调试模式");
        }
        // 加载位置，后续版本开启加载写入全局
        uni.getLocation({
            type: "wgs84",
            geocode: true,
            success: (mres) => {
                uni.request({
                    url: "https://restapi.amap.com/v3/geocode/regeo",
                    data: {
                        key: this.$wanlshop.config("amapkey"),
                        location: mres.longitude + "," + mres.latitude,
                    },
                    // 1.1.8升级
                    success: (res) => {
                        if (res.res.infocode == "10000") {
                            let address = res.data.regeocode.addressComponent;
                            this.drawerData.sameCity.name = address.province;
                        } else {
                            this.$wanlshop.msg("获取位置失败：错误" + res.res.info);
                        }
                    },
                });
            },
        });
        this.loadData();
        if (this.goodsData.length == 0) {
            this.loadlikeData();
        }
    },
    // 监听上拉
    onPullDownRefresh() {
        this.params.page = 1;
        this.reload = true;
        this.loadData();
    },
    // 下拉刷新
    onReachBottom() {
        if (this.params.page >= this.last_page) {
            this.status = "noMore";
        } else {
            this.reload = false;
            this.contentText.contentdown = "上拉显示更多";
            this.params.page = this.params.page + 1; //页码+1
            this.status = "loading";
            this.loadData();
        }
    },
    // 监听滚动
    onPageScroll(object) {
        if (object.scrollTop > this.WanlScroll) {
            this.scrollStype = false;
        } else {
            this.scrollStype = true;
        }
        if (object.scrollTop < 0) {
            this.scrollStype = false;
        }
        this.WanlScroll = object.scrollTop;
    },
    // 监听返回
    onUnload() {
        if (this.showRight) {
            this.closeDrawer();
            return true;
        }
    },
    methods: {
        //异步加载商品列表
        async loadData() {
            // this.params.type = this.goodsType;
            await uni.request({
                url: "/score/goods/GetGoodsList",
                data: this.params,
                success: (res) => {
                    uni.stopPullDownRefresh();
                    this.status = "more";
                    this.goodsData = this.reload ? res.data.data : this.goodsData.concat(res.data.data); //数据 追加
                    if (res.data.data.length == 0) {
                        this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
                    }
                    this.params.page = res.data.current_page; //当前页码
                    this.last_page = res.data.last_page; //总页码
                },
            });
        },
        // 滚动底部加载猜你喜欢
        async loadlikeData() {
            await uni.request({
                url: `/wanlshop/product/likes?pages=${this.goodsType}`,
                success: (res) => {
                    this.likeData = res.data.data; //评论数据 追加
                },
            });
        },
        // 加载侧边栏数据
        async loadDrawer() {
            this.drawerParams.type = this.goodsType;
            await uni.request({
                url: "/wanlshop/product/drawer",
                data: this.drawerParams,
                success: (res) => {
                    var brand = [],
                        attribute = [];
                    if (res.data.brand) {
                        res.data.brand.forEach((item) => {
                            var brandData = {
                                id: item.id,
                                name: item.name,
                                fold: false, // 展开
                                choice: false,
                            };
                            brand.push(brandData);
                        });
                    }
                    if (res.data.attribute) {
                        res.data.attribute.forEach((item) => {
                            var value = [];
                            item.value.forEach((vo) => {
                                var valueData = {
                                    name: vo.name,
                                    choice: false,
                                };
                                value.push(valueData);
                            });
                            var attributeData = {
                                name: item.name,
                                value: value,
                                fold: false,
                            };
                            attribute.push(attributeData);
                        });
                    }
                    this.drawerData.brand = brand;
                    this.drawerData.attribute = attribute;
                },
            });
        },
        //筛选点击
        tabClick(index) {
            if (this.filterIndex === index && index !== 3) {
                return;
            }
            this.filterIndex = index;
            if (index === 3) {
                this.priceOrder = this.priceOrder === 1 ? 2 : 1;
            } else {
                this.priceOrder = 0;
            }

            // 排序方式
            if (index === 0) {
                this.params.type = 0;
            }
            if (index === 1) {
                this.params.type = 1;
            }
            if (index === 2) {
                this.params.type = 2;
            }
            this.status = "loading";
            this.params.page = 1;
            this.reload = true;
            this.loadData();
            uni.pageScrollTo({
                duration: 300,
                scrollTop: 0,
            });
        },
        // 打开抽屉，并且加载品牌和类目属性
        showDrawer() {
            this.showRight = true;
            if (!this.drawerType.first) {
                this.loadDrawer();
                this.drawerType.first = true;
            }
        },
        // 点击抽屉
        onDraver(e) {
            var index = e.currentTarget.dataset.attribute,
                key = e.currentTarget.dataset.key;
            if (key == "brand" || key == "city") {
                // 取消所有选项,选中下面
                this.drawerData[key].forEach((item, keys) => {
                    keys != index ? (item.choice = false) : "";
                });
                // 取消同城
                this.drawerData.sameCity.choice = false;
                this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
            } else if (key == "sameCity") {
                // 取消所有城市选项
                this.drawerData.city.forEach((item) => {
                    item.choice = false;
                });
                this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
            } else {
                // 取消所有选项,选中下面
                this.drawerData.attribute[index].value.forEach((item, keys) => {
                    keys != key ? (item.choice = false) : "";
                });
                this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key].choice;
            }
        },
        // 提交抽屉
        onDrawerTo() {
            // 查询价格
            if (this.drawerData.price.low != "" && this.drawerData.price.high != "") {
                this.params.filter.price = this.drawerData.price.low + "," + this.drawerData.price.high;
                this.params.op.price = "BETWEEN";
            } else {
                delete this.params.filter.price;
                delete this.params.op.price;
            }
            // 查询地址
            var cityData = "";
            this.drawerData.city.forEach((item) => {
                if (item.choice) {
                    cityData = item.name;
                }
            });
            if (cityData) {
                this.params.filter["shop.city"] = "%" + cityData + "%";
                this.params.op["shop.city"] = "LIKE";
            } else if (this.drawerData.sameCity.choice) {
                this.params.filter["shop.city"] = this.drawerData.sameCity.name;
                this.params.op["shop.city"] = "LIKE";
            } else {
                delete this.params.filter["shop.city"];
                delete this.params.op["shop.city"];
            }
            // 查询品牌
            var brandData = "";
            this.drawerData.brand.forEach((item) => {
                if (item.choice) {
                    brandData = item.id;
                }
            });
            if (brandData) {
                this.params.filter.brand_id = brandData;
                this.params.op.brand_id = "=";
            } else {
                delete this.params.filter.brand_id;
                delete this.params.op.brand_id;
            }
            // 查询属性
            var attributeData = [];
            this.drawerData.attribute.forEach((item, index) => {
                // item.name
                item.value.forEach((vo, index) => {
                    if (vo.choice) {
                        attributeData.push("%" + vo.name + "%");
                    }
                });
            });
            // 1.0.8升级 有此项无法查询
            if (attributeData.length > 0) {
                this.params.filter.category_attribute = attributeData.join(",");
                this.params.op.category_attribute = "LIKE";
            } else {
                delete this.params.filter.category_attribute;
                delete this.params.op.category_attribute;
            }
            this.status = "loading";
            // 1.0.8升级
            this.goodsData = [];
            this.params.page = 1;
            this.reload = true;
            this.loadData();
            this.closeDrawer();
        },
        // 重置抽屉
        onDrawerReset() {
            this.drawerData.city.forEach((item) => {
                item.choice = false;
            });
            this.drawerData.sameCity.choice = false;
            this.loadDrawer();
        },
        // 点击抽屉标题
        onDraverTitle(e) {
            var stype = e.currentTarget.dataset.key;
            if (stype === "city") {
                this.drawerType[stype] = !this.drawerType[stype];
            } else {
                this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
            }
        },
        // 关闭抽屉
        closeDrawer() {
            this.showRight = false;
        },
        //回车事件
        handleKeyup(event) {
            if (event.keyCode === 13) {
                // 回车键键码
                console.log("按下了回车键");
            } else if (event.keyCode === 229) {
                // 部分手机软键盘完成键的键码，可能因设备而异
                console.log("按下了手机软键盘的完成键");
            }
        },
        //失焦事件
        handleBlur() {
            // 失焦时执行的逻辑
            console.log("输入框失去焦点");
            this.goodsData = [];
            this.params.page = 1;
            this.loadData();
        },
        editListstyle() {
            this.liststyle = this.liststyle == "col-1-10" ? "col-2-20" : "col-1-10";
        },
    },
};
</script>

<style>
.cu-custom .search-form {
    border: 3rpx solid #fe6600;
    background-color: #fff;
}
.cu-tag:not([class*="bg"]):not([class*="line"]) {
    background-color: #f7f7f7;
}
</style>
